<template>
    <div style="padding: 20px;">
        <p style="font-size: 30px;text-align: left;margin: 10px 0;">上传题库</p>
        <div class="box">
            <h2>
                已有题库：
                <span>{{ info.length }}</span>道
                <!-- <el-button type="primary">
                    <i class="el-icon-circle-plus-outline"></i> EXCEL批量上传
                </el-button> -->
            </h2>
            <el-radio-group v-model.trim="radio1" @change="handleChange">
                <el-radio-button label="1">单选题</el-radio-button>
                <el-radio-button label="2">填空题</el-radio-button>
            </el-radio-group>
            <!-- 单选题内容 -->
            <div class="box_d1" v-if="active == 0">
                <el-form :model="form1" :rules="rules" ref="form1" width="150px" class="demo-ruleForm">
                    <el-form-item prop="patitle">
                        1.{{ form1.patitle }}
                        <el-button style="margin-left: 50px;" @click="dialogVisible = true">修改题目</el-button>
                        <br />
                    </el-form-item>
                    <el-form-item prop="resource">
                        <el-radio-group v-model.trim="form1.resource">
                            <el-radio label="A">
                                A: {{ form1.paone }}
                                <span class="dan" v-if="form1.resource == 'A'">(正确答案)</span>
                            </el-radio>
                            <br />
                            <el-radio label="B">
                                B: {{ form1.paone1 }}
                                <span class="dan" v-if="form1.resource == 'B'">(正确答案)</span></el-radio>
                            <br />
                            <el-radio label="C">
                                C: {{ form1.paone2 }}
                                <span class="dan" v-if="form1.resource == 'C'">(正确答案)</span></el-radio>
                            <br />
                            <el-radio label="D">
                                D: {{ form1.paone3 }}
                                <span class="dan" v-if="form1.resource == 'D'">(正确答案)</span></el-radio>
                        </el-radio-group>
                    </el-form-item>
                    <!-- 方向 -->
                    <div class="d1">
                        <el-form-item label="方向">
                            <el-select v-model.trim="form1.value1" placeholder="请选择方向">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 第几周 -->
                    <div class="d1">
                        <el-form-item label="第几周">
                            <el-select v-model.trim="form1.value2" placeholder="请选择第几周">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 难度 -->
                    <div class="d1">
                        <el-form-item label="难度">
                            <el-select v-model.trim="form1.value3" placeholder="请选择难度">
                                <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 答案 -->
                    <div class="d1">
                        <el-form-item prop="resource" label="答案">
                            <el-select v-model.trim="form1.resource" placeholder="请选择正确选项">
                                <el-option v-for="item in options4" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-button type="primary" class="sc" @click="addquestion('form1')">上传题库</el-button>
                </el-form>
            </div>
            <!-- 修改单选的弹窗 -->
            <el-dialog title="修改题目" :visible.sync="dialogVisible" width="40%" :before-close="handleClose">
                <el-form ref="form1">
                    <el-form-item label="题  目：">
                        <el-input v-model="form1.patitle" placeholder="请输入内容" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="选项一：">
                        <el-input v-model="form1.paone" placeholder="请输入内容" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="选项二：">
                        <el-input v-model="form1.paone1" placeholder="请输入内容" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="选项三：">
                        <el-input v-model="form1.paone2" placeholder="请输入内容" style="width: 80%;"></el-input>
                    </el-form-item>
                    <el-form-item label="选项四：">
                        <el-input v-model="form1.paone3" placeholder="请输入内容" style="width: 80%;"></el-input>
                    </el-form-item>
                </el-form>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
                </span>

            </el-dialog>
            <!-- 填空题内容 -->
            <div class="box_d1" v-if="active == 1">
                <el-form ref="form2" :rules="rules" v-model="form2">
                    <p><b>{{ form2.patitle1 }}</b> <el-button style="margin-left: 50px;"
                            @click="dialogVisible1 = true">修改题目</el-button>
                    </p>
                    <el-form-item label="参考答案">
                        <el-input type="textarea" v-model.trim="form2.desc"></el-input>
                    </el-form-item>
                    <!-- 方向 -->
                    <div class="d1">
                        <el-form-item label="方向">
                            <el-select v-model.trim="form2.value4" placeholder="请选择方向">
                                <el-option v-for="item in options" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 第几周 -->
                    <div class="d1">
                        <el-form-item label="第几周">
                            <el-select v-model.trim="form2.value5" placeholder="请选择第几周">
                                <el-option v-for="item in options2" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <!-- 难度 -->
                    <div class="d1">
                        <el-form-item label="难度">
                            <el-select v-model.trim="form2.value6" placeholder="请选择难度">
                                <el-option v-for="item in options3" :key="item.value" :label="item.label"
                                    :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>
                    </div>
                    <el-button type="primary" class="sc" @click="addquestion('form2')">上传题库</el-button>
                </el-form>
            </div>
            <el-dialog title="修改题目" :visible.sync="dialogVisible1" width="30%" :before-close="handleClose">
                题目： <el-input v-model="form2.patitle1" placeholder="请输入内容" style="width: 80%;"></el-input>
                <span slot="footer" class="dialog-footer">
                    <el-button type="primary" @click="dialogVisible1 = false">确 定</el-button>
                </span>
            </el-dialog>
        </div>
    </div>
</template>

<script>
export default {
    data() {
        return {
            dialogVisible: false,
            dialogVisible1: false,
            active: 0,
            radio: "",
            radio1: "1",
            rules: {
                patitle: [
                    { required: true, message: "请选择正确答案", trigger: "change" }
                ],
                resource: [
                    { required: true, message: "请选择正确答案", trigger: "change" }
                ],
                desc: [
                    { required: true, message: "请输入参考答案", trigger: "change" }
                ],
            },
            form1: {// 单选题
                patitle: '请选择一个选项',
                paone: '选项一',
                paone1: '选项二',
                paone2: '选项三',
                paone3: '选项四',
                value1: "java",// 方向
                value2: "2",// 第几周
                value3: "易",// 难度
                resource: "A"// 正确答案
            },
            form2: {// 填空题
                patitle1: '请输入问题?',
                desc: '',// 参考答案
                value4: "web",// 方向
                value5: "1",// 第几周
                value6: "难",// 难度
            },
            options: [
                {
                    value: "java",
                    label: "java"
                },
                {
                    value: "web",
                    label: "web"
                },
                {
                    value: "ui",
                    label: "ui"
                }
            ],
            options2: [
                {
                    value: "1",
                    label: "1"
                },
                {
                    value: "2",
                    label: "2"
                },
                {
                    value: "3",
                    label: "3"
                },
                {
                    value: "4",
                    label: "4"
                },
                {
                    value: "5",
                    label: "5"
                }
            ],
            options3: [
                {
                    value: "易",
                    label: "易"
                },
                {
                    value: "难",
                    label: "难"
                }
            ],
            options4: [
                {
                    value: "A",
                    label: "A"
                },
                {
                    value: "B",
                    label: "B"
                },
                {
                    value: "C",
                    label: "C"
                },
                {
                    value: "D",
                    label: "D"
                }
            ],
            info: "",// 题库
        };
    },
    methods: {
        handleClose(done) {
            done();
        },
        handleChange(val) {
            if (val == 1) {
                this.active = 0;
            } else if (val == 2) {
                this.active = 1;
            }
        },
        addquestion(formName) {
            let obj = {};
            if (formName == 'form1') {
                obj = {
                    qtype: '选择',
                    qrection: this.form1.value1,
                    week: this.form1.value2,
                    difficulty: this.form1.value3,
                    answer: this.form1.resource,
                    topic: this.form1.patitle,
                    options: `A:${this.form1.paone};B:${this.form1.paone1};C:${this.form1.paone2};D:${this.form1.paone3}`,
                }
            } else if (formName == 'form2') {
                obj = {
                    qtype: '填空',
                    qrection: this.form2.value4,
                    week: this.form2.value5,
                    difficulty: this.form2.value6,
                    answer: this.form2.desc,
                    topic: this.form2.patitle1,
                }
            }
            this.$axios.post('/question/addquestion', obj, { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res) => {
                console.log(306, res);
                if (res.data.status == 100) {
                    return this.$message({
                        type: 'error',
                        message: '已有这个题目'
                    });
                } else if (res.data.status !== 200) {
                    return this.$message({
                        type: 'error',
                        message: '新增题库失败'
                    });
                } else {
                    this.$message({
                        type: 'success',
                        message: '新增题库成功'
                    });
                    this.$axios.get('/question/getquestion').then((res) => {
                        this.info = res.data.data;
                    })
                }
            })
        },
    },
    mounted() {
        this.$axios.get('/question/getquestion').then((res) => {
            console.log(res.data);
            this.info = res.data.data;
        })
    }
};
</script>

<style lang="less" scoped>
h1 {
    text-align: left;
}

.box {
    text-align: left;
    padding: 10px 20px;
}

h2 {
    line-height: 40px;
    margin: 0;
}

.el-radio-group {
    margin-top: 10px;
    margin-bottom: 20px;
}

.dan {
    color: #67c23a;
}

.el-radio {
    margin-left: 40px;
    margin-bottom: 20px;
}

.d1 {
    float: left;
    width: 150px;
    margin-right: 20px;
}

.sc {
    margin-top: 40px;
}
</style>